<template>
  <div class="app-container">
    <el-table
      style="width: 100%"
      :data="theses01"
    >
      <el-table-column
        label="已选课程"
      >
        <el-table-column
          prop="title"
          label="课题名称"
          align="left"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="onViewDetails(scope.row.id)">{{ scope.row.title }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="teacher"
          label="老师"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <el-tooltip
              :key="scope.row.teacher.id"
              effect="light"
              placement="top"
            >
              <div slot="content">
                <p>手机号：{{ scope.row.teacher.phone }}</p>
                <p>qq：{{ scope.row.teacher.qq }}</p>
              </div>
              <student-tag
                :text="scope.row.teacher.name"
                size="medium"
                type="brand"
              />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="created"
          label="创建时间"
          align="center"
          width="250"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ new Date(scope.row.created).toLocaleString() }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="numApplied"
          label="已选人数"
          align="center"
          width="120"
        />
        <el-table-column
          prop="status"
          label="课题状态"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status != 3" type="success">选定中</el-tag>
            <el-tag v-else type="danger">已选定</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="操作"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              @click="onDelete(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-table
      style="width: 100%"
      :data="theses02"
    >
      <el-table-column class="tableHeader" label="可选课程">
        <el-table-column
          prop="title"
          label="课题名称"
          align="left"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="onViewDetails(scope.row.id)">{{ scope.row.title }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="teacher"
          label="老师"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <el-tooltip
              :key="scope.row.teacher.id"
              effect="light"
              placement="top"
            >
              <div slot="content">
                <p>手机号：{{ scope.row.teacher.phone }}</p>
                <p>qq：{{ scope.row.teacher.qq }}</p>
              </div>
              <student-tag
                :text="scope.row.teacher.name"
                size="medium"
                type="brand"
              />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="created"
          label="创建时间"
          align="center"
          width="250"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ new Date(scope.row.created).toLocaleString() }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="numApplied"
          label="已选人数"
          align="center"
          width="120"
        />
        <el-table-column
          prop="status"
          label="课题状态"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status != 3" type="success">选定中</el-tag>
            <el-tag v-else type="danger">已选定</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="操作"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <el-button
              v-if="theses01.length != 3 && scope.row.status != 3 && scope.row.numApplied != 3 "
              type="success"
              size="small"
              @click="onChosen(scope.row.id)"
            >选定</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="thesis.title"
      :visible.sync="isDialogVisible"
    >
      <div v-loading="contentLoading">{{ thesis.content || '' }}</div>
      <el-button slot="footer" type="primary" @click="isDialogVisible = false">确 定</el-button>
    </el-dialog>
    <div>
      <el-pagination
        class="fy"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 20]"
        :page-size="pagesize"
        :current-page="currentPage"
        :total="total"
        :hide-on-single-page="value"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getChosenTheses, getUnChosenTheses, getThesisById, postChosenTheses, deleteChosenTheses } from '@/api/theses'
// import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import StudentTag from './components/StudentTag'
export default {
  // 注册主键
  components: {
    StudentTag
  },

  data() {
    return {
      theses01: [],
      theses02: [],
      contentLoading: false,
      isDialogVisible: false,
      thesis: {},
      value: true,
      total: 0, // 默认数据总数
      pagesize: 5, // 每页的数据条数
      currentPage: 1 // 默认开始页面
    }
  },

  computed: {
    // uid() {
    //   return this.$store.state.user.uid
    // }

    // ...mapState({
    //   uid: (state) => state.user.uid
    // })

    ...mapGetters(['uid'])
  },

  watch: {
    isDialogVisible(value) {
      if (value) {
        getThesisById(this.thesisId).then(res => {
          this.thesis = res.data.data
        })
      }
    }
  },

  created() {
    this.onGetChosenTheses()
  },

  methods: {
    handleSizeChange: function(size) {
      this.pagesize = size
      this.onGetChosenTheses()
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.onGetChosenTheses()
    },

    onGetChosenTheses() {
      getChosenTheses(this.uid, 2020, true).then(res => {
        this.theses01 = res.data.data
      })
      getUnChosenTheses(this.uid, 2020, this.currentPage, this.pagesize).then(res => {
        const pageData = res.data.data
        this.theses02 = pageData.data
        this.total = pageData.count // 设置数据总数目！！！
      })
    },

    onViewDetails(id) {
      this.thesisId = id
      // 弹出对话框
      this.isDialogVisible = true
    },

    onChosen(id) {
      this.$confirm('将选定该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postChosenTheses(('uid', this.uid), id).then(res => {
          this.$message({
            message: '选课成功！！！！',
            type: 'success'
          })
          this.onGetChosenTheses()
        }).catch(() => {
          this.$message({
            code: 2001,
            message: '学生已经被其它老师选定！',
            type: 'error'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消选课'
        })
      })
    },

    onDelete(id) {
      this.$confirm('此操作将删除该选课, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteChosenTheses(('uid', this.uid), id).then(res => {
          this.$message({
            message: '删除选课成功！！！！',
            type: 'success'
          })
          this.onGetChosenTheses()
        }).catch((error) => {
        // 由网络或者服务器抛出的错误
          alert(error.toString())
          this.$message({
            code: 2001,
            message: '你已经被其它老师选定了！不能删除选课！',
            type: 'error'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.fy {

  vertical-align: middle;
}
</style>
